﻿<!DOCTYPE html>
<html>

<head>
    <title>Dream Home AR</title>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">
    <link href="css/bootstrap-responsive.css" rel="stylesheet" />
    <link href="css/kendo.common.min.css" rel="stylesheet" />
    <link href="css/kendo.default.min.css" rel="stylesheet" />
    <link href="css/kendo.metro.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <!--<link href="css/kendo.flat.min.css" rel="stylesheet" />-->

    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/kendo.web.min.js"></script>

    <!--Custom css for layout-->
    <script src="js/Layout.js"></script>
</head>
<body>
    <div class="container-fluid fill">
        <div class="row-fluid">
            <div id="AppHeader" class="span12 center">
                <img src="/img/Logo.png" alt="header" />
            </div>
        </div>

        <div class="row-fluid">

            <div class="span3">
                <div id="listView"></div>
                <div id="pager" class="k-pager-wrap"></div>
            </div>

            <div class="span9">

                <div id="stage" class="row">
                    <div id="ar_container"></div>

                    <!-- JavaScript includes -->
                    <script src="js/JSARToolKit.js" type="text/javascript"></script>
                    <script src="js/Three.js" type="text/javascript"></script>
                    <script src="js/ColladaLoader.js"></script>
                    <script src="js/MTLLoader.js"></script>
                    <script src="js/OBJMTLLoader.js"></script>
                    <script src="js/Stats.js" type="text/javascript"></script>
                    <script src="js/THREEx.KeyboardState.js"></script>
                    <script src="js/threex.jsartoolkit.js" type="text/javascript"></script>
                    <script src="js/AugmentedReality.js" type="text/javascript"></script>
                    <script src="js/ARViewerMain.js" type="text/javascript"></script>
                </div>

                <div id="panelProperty" class="row">

                    <div class="span3">
                        <h5 class="white">Rotatation</h5>
                        <input id="rotationChange" class="balSlider" value="0" />
                    </div>

                    <div class="span3">
                        <h5 class="white">Scale</h5>
                        <input id="scaleChange" class="balSlider" value="0" />
                    </div>

                    <div class="span3">
                        <h5 class="white">Color</h5>
                        <div id="palette"></div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/x-kendo-tmpl" id="template">
            <div class="product">
                <img src="/img/Icon.png" alt="#:Name# image" />
                <h3>#:Name#</h3>
            </div>
        </script>
    </div>
</body>
</html>